<template>
  <div class="errorpage" @click="gotoPage('guide')">
    <img src="../../assets/images/503.png" alt="" />
    <p class="tips">即将跳转到主页. . .</p>
    <van-circle
      class="Goto"
      v-model="currentRate"
      layer-color="#fff"
      size="50px"
      :rate="100"
      :speed="20"
      :text="text"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentRate: 0,
      text: "",
    };
  },
  watch: {
    /* 监听 */
    currentRate(v) {
      console.log(v);
      if (v == 100) {
        this.gotoPage("guide");
      }
    },
  },
};
</script>
<style lang="scss">
.errorpage {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background-color: #fff;
  .tips {
    width: 300px;
    height: 50px;
    font-size: 30px;
    position: absolute;
    left: 380px;
    bottom: 200px;
  }
  img {
    width: 100%;
    height: 500px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .Goto {
    position: absolute;
    right: 10px;
    top: 10px;
  }
}
</style>